<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章信息</title>
    <script type="text/javascript" src="/static/js/jquery.js"></script>
    <script type="text/javascript" src="/static/js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/static/js/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="/static/js/MyAjaxForm.js"></script>
    <script src="/static/js/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
    <link href="/static/css/themes/default/easyui.css" rel="stylesheet"/>
    <link href="/static/css/themes/icon.css" rel="stylesheet"/>
    <script type="text/javascript">
        $(function () {
            loadData();
            $("#addParentDiv").css("display","none");//隐藏DIV
            $("#addChildDiv").css("display","none");
        })
        function loadData() {
            $('#tt').treegrid({
                title: '栏目管理',
                iconCls: 'icon-save',
                width: 500,
                height: 350,
                nowrap: false,
                rownumbers: true,
                animate: true,
                collapsible: true,
                url: '/Admin/ArticleClass/ShowArticleClass',
                idField: 'Id',
                treeField: 'ClassName',
                lines: true,
                columns: [[
                    {field: 'Id', title: '编号', width: 150, rowspan: 2},
                    {field: 'ClassName', title: '栏目名称', width: 120},
                    {field: 'Remark', title: '备注', width: 120, rowspan: 2}

                ]],
                onClickRow: function (row) {
                    //根据所单击的行，获取对应的子类别.
                    $.post("/Admin/ArticleClass/ShowChildClass", {"id": row.Id}, function (data) {
                        //先清空，后追加.如果没有数据不追加
                        if (data.rows.length != 0) {
                            var nodes = $('#tt').treegrid('getChildren', row.Id);
                            for (var i = 0; i < nodes.length; i++) {
                                $('#tt').treegrid('remove', nodes[i].id);
                            }
                            $('#tt').treegrid('append', {
                                parent: row.Id,
                                data: data.rows
                            });
                        }
                    });
                },
                toolbar: [
                    {
                        id: 'btnAddParent',
                        text: '添加根栏目',
                        iconCls: 'icon-add',
                        handler: function () {
                            addParentArticle();

                        }
                    }
                    , {
                        id: 'btnAdd',
                        text: '添加子栏目',
                        iconCls: 'icon-add',
                        handler: function () {
                            addChildArticle();

                        }
                    }, {
                        id: 'btnEdit',
                        text: '编辑',
                        iconCls: 'icon-edit',
                        handler: function () {
                            // showChildArticle();

                        }
                    }]
            })
        }
    </script>
</head>
<body>
<div id="addParentDiv">
    <iframe id="addParentFrame" frameborder="0" width="100%" height="100%"></iframe>
</div>
<div id="addChildDiv">
    <iframe id="addChildFrame" frameborder="0" width="100%" height="100%"></iframe>
</div>
<div id="showArticleDiv">
    <table id="tt"></table>
</div>
</body>

<script type="text/javascript">
    function addParentArticle() {
        $("#addParentFrame").attr("src","/Admin/ArticleClass/ShowAddParentClass")
        $("#addParentDiv").css("display","block");
        $('#addParentDiv').dialog({
            title: '添加根类别信息',
            width: 300,
            height: 300,
            collapsible: true,
            maximizable: true,
            resizable: true,
            modal: true,
            buttons: [{
                text: 'Ok',
                iconCls: 'icon-ok',
                handler: function () {
                    //提交表单。
                    var childWindows=$("#addParentFrame")[0].contentWindow;//获取子窗体的windows对象。
                    childWindows.subForm()//调用，子页面中的subForm方法，来完成表单的提交
                }
            }, {
                text: 'Cancel',
                handler: function () {
                    $('#addParentDiv').dialog('close');
                }
            }]
        });
    }
    function addChildArticle() {
        var row = $('#tt').treegrid('getSelected');
        if (row != null) {
            $("#addChildFrame").attr("src", "/Admin/ArticleClass/ShowAddChildClass?cId="+row.Id);
            $("#addChildDiv").css("display", "block");
            $('#addChildDiv').dialog({
                title: '添加子类别信息',
                width: 300,
                height: 300,
                collapsible: true,
                maximizable: true,
                resizable: true,
                modal: true,
                buttons: [{
                    text: 'Ok',
                    iconCls: 'icon-ok',
                    handler: function () {
                        //提交表单。
                        var childWindows = $("#addChildFrame")[0].contentWindow;//获取子窗体的windows对象。
                        childWindows.subForm()//提交表单

                    }
                }, {
                    text: 'Cancel',
                    handler: function () {
                        $('#addChildDiv').dialog('close');
                    }
                }]
            });
        }else{
            $.messager.alert("提示","请选择对应的根类别!!","error");
        }
    }
    function afterParentAdd(data){
        if(data.flag=="ok"){
            $('#addParentDiv').dialog('close');
            $('#tt').treegrid('reload');
        }
    }
    function afterChildAdd(data){
        if(data.flag=="ok"){
            $('#addChildDiv').dialog('close');
            $('#tt').treegrid('reload');
        }
    }
</script>
</html>